<template>
  <div class="main-box">
    <div class="df jc-e">
      <el-button
        v-permission="username"
        class="btn-primary"
        style="margin-bottom: 10px"
        @click="add">
        添加分类
      </el-button>
      <el-button
        v-permission="username"
        class="btn-primary"
        style="margin-bottom: 10px"
        @click="deleteAll">
        删除全部
      </el-button>
    </div>
    <el-table
      :data="tableData"
      row-class-name="row"
      cell-class-name="column"
      header-row-class-name="row"
      header-cell-class-name="column"
      style="width: 100%; background-color: transparent"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="category_id" label="id" />
      <el-table-column prop="name" label="名称" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button v-permission="username" type="primary" size="small" @click="edit(scope.row)">
            修改
          </el-button>
          <deleteBtn @confirm="deleteC(scope.row)"></deleteBtn>
        </template>
      </el-table-column>
    </el-table>
    <categoryAdd
      v-model="categoryShow"
      v-model:row="editRow"
      @reloadList="reloadList"></categoryAdd>
  </div>
</template>

<script setup lang="ts">
  import { getCategoryList, deleteCategory } from '@/apis/category';
  import type { ICategory } from '@/apis/type';
  import deleteBtn from '@/components/delete-btn.vue';
  import categoryAdd from '@/components/category/category-add.vue';
  import { useUserStore } from '@/stores/userStore';
  const { username } = useUserStore().getUser();
  // 列表数据
  const tableData: Ref<ICategory[]> = ref([]);
  // 数据请求
  const reloadList = async () => {
    const res = await getCategoryList();
    if (res.code != 200) ElMessage.error(res.msg);
    tableData.value = res.data;
  };
  reloadList();
  // 是否显示新增 修改框
  const categoryShow = ref(false);
  let editRow = ref({});
  // 修改
  const edit = (row: ICategory) => {
    categoryShow.value = true;
    editRow.value = row;
  };
  // 新增
  const add = () => {
    categoryShow.value = true;
    editRow.value = {};
  };
  // 删除
  const deleteC = async (row: ICategory) => {
    const res = await deleteCategory({ id: row.id });
    if (res.code == 200) ElMessage.success(res.msg);
    reloadList();
  };
  const deleteAll = async () => {
    if (ids.length <= 0) return ElMessage.error('请先选中分类');
    ElMessageBox.confirm('确认删除吗?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info'
    }).then(async () => {
      const res = await deleteCategory({ id: ids.join(',') });
      if (res.code == 200) ElMessage.success(res.msg);
      reloadList();
    });
  };
  // 选中
  let ids: Array<string> = [];
  const handleSelectionChange = async (val: Array<ICategory>) => {
    ids = [];
    val.map(item => {
      ids.push(item.id as string);
    });
  };
</script>

<style scoped>
  ::v-deep(.row),
  ::v-deep(.column) {
    background-color: var(--bg-color) !important;
    color: var(--text-color);
    border-bottom: #fff !important;
  }
  ::v-deep(.row:hover) {
    background-color: var(--bg-color-reverse) !important;
    border-bottom: #fff !important;
    color: var(--text-color);
  }
  ::v-deep(.el-table__inner-wrapper)::before {
    /* 去除下边框 */
    height: 0;
  }
</style>
